<template>
<div class="role-management">
  <div class="ant-pro-table-search">
    <div class="wrapper" v-show="tableShow">
      <!-- 查询表单 -->
      <div class="ant-pro-table-search">
        <a-form v-bind="searchFormLayout">
          <a-row :gutter="16">
            <a-col :md="8" :sm="24">
              <a-form-item label="角色名称">
                <a-input v-model="queryParam.name" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="16" :sm="24" class="table-page-search-wrapper">
              <div class="table-page-search-submitButtons">
                <a-button type="primary" @click="reloadTable">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
          <!-- 表格区域 -->
      <a-card :bordered="false" :bodyStyle="{ padding: 0 }">
        <!-- 操作按钮区域 -->
        <div class="ant-pro-table-toolbar">
          <div class="ant-pro-table-toolbar-title">系统用户</div>
          <div class="ant-pro-table-toolbar-option">
            <a-button type="primary" icon="plus" @click="handleAdd()">新建</a-button>
          </div>
        </div>
        <div class="ant-pro-table-wrapper">
          <a-alert :showIcon="true" style="margin-bottom: 16px">
            <template #message>
              <span style="margin-right: 12px"
                >已选择:
                <a style="font-weight: 600">{{ selectedRows.length }}</a></span
              >
              <a
                style="margin-left: 24px"
                v-show="selectedRows.length > 0"
                @click="onClearSelected"
                >清空</a
              >
            </template>
          </a-alert>
          <!--数据表格-->
          <a-table
            ref="table"
            size="middle"
            :rowKey="rowKey"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
            :alert="{ show: true, clear: true }"
            :rowSelection="{
              onChange: onSelectChange,
              selectedRowKeys: selectedRowKeys,
            }"
          >
          <template #defaultRole-slot="record">{{record | defaultRoleFilter}}</template>
          <template #showAlways-slot="record">{{record | showAlwaysFilter}}</template>
          <!-- 操作 -->
          <template #action-slot="text, record">
              <a href="javascript:;" @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
               <a href="javascript:;" @click="handleGrant(record)">授权</a>
               <a-divider type="vertical" />
               <a-popconfirm title="确认要删除吗？" @confirm="() => clickDel(record)">
                <a href="javascript:;">删除</a>
               </a-popconfirm>
               <a-divider type="vertical" />
            </template>
          </a-table>
        </div>
      </a-card>
    </div>
       <!--表单页面-->
    <a-card v-show="!tableShow" :bordered="false" :title="cardTitle">
      <form-com
        ref="formPage"
        @backToPage="reloadTable"
      ></form-com>
    </a-card>
  </div>
</div>
</template>
<script>
import { tablePageMixin } from "@/mixins/";
import FormCom from "./formCom"
export default {
  components: { FormCom },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "角色",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "是否默认角色",
          dataIndex: "defaultRole",
          align: "center",
          scopedSlots: { customRender: "defaultRole-slot" },
        },
        {
          title: "是否前台显示",
          dataIndex: "showAlways",
          align: "center",
          scopedSlots: { customRender: "showAlways-slot" },
        },
        {
          title: "备注",
          dataIndex: "description",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          width: "160px",
          scopedSlots: { customRender: "action-slot" },
        },
      ],
    }
  },
  mixins: [tablePageMixin],
  filters: {
    defaultRoleFilter(type) {
      if(type){
        return '是'
      }else{
        return '否'
      }
    },
    showAlwaysFilter(type) {
      if(type){
        return '是'
      }else{
        return '否'
      }
    },
  },
  mounted(){
    this.reloadTable()
  },
  created(){
    this.getDataUrl = "/rapid/role/getPage";
     this.reloadTable()
   },
  methods: {
     // 查询操作
    reloadTable() {
      this.pagination.current = 1;
      this.tableShow = true
      const data = {
        pageVo: {
          pageNumber: this.pagination.current,
          pageSize: this.pagination.pageSize,
        },
        role: {
          ...this.queryParam,
        },
      };
      this.loadData("/rapid/role/getPage", data);
    },
      clickDel(row){
        console.log(row,'66')
        this.$http("/rapid/role/delRole", {...row}).then(res => {
         if (res.code === 200) {
            this.$message.success(res.message)
            this.reloadTable()
          } else {
            this.$message.error(res.message)
          }
        })
      }
  }
};
</script>
<style lang="less" scoped>
.role-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}
</style>